<template>
  <div class="home">
    <div class="navi-header">
      <div @click="submit(1)">个人简介</div>
      <div @click="submit(2)">工作复盘</div>
      <div @click="submit(3)">个人的成长</div>
      <div @click="submit(4)">展望未来</div>
    </div>
    <div class="selfIntroduction" id="boxItem1">
      <bigTitle :title="title1" :box="box1" class="animate__animated animate__bounce"/>
      <selfIntroduction />
    </div>
    <div class="summary" id="boxItem2">
      <bigTitle :title="title2" :box="box2"/>
      <summarys />
    </div>
    <div class="progress" id="boxItem3">
      <bigTitle :title="title3" :box="box3"/>
      <progressi />
    </div>
    <div class="future" id="boxItem4">
      <bigTitle :title="title4" :box="box4"/>
      <forFuture />
    </div>
  </div>
</template>

<script>
import bigTitle from './components/bigTitle'
import summarys from './components/summary'
import selfIntroduction from './components/selfIntroduction'
import progressi from './components/progress'
import forFuture from './components/forFuture'

export default {
  name: 'Home',
  components: {
    summarys,
    bigTitle,
    selfIntroduction,
    progressi,
    forFuture
  },
  data () {
    return {
      title1: '自我介绍',
      box1: 'INTRODUCE',
      title2: '过去三个月工作回顾总结',
      box2: 'REVIEW',
      title3: '个人的成长小结',
      box3: 'PROGRESS',
      title4: '展望未来',
      box4: 'FOR-FUTURE'
    }
  },
  mounted () {
    // window.addEventListener('scroll', this.watchScroll)
  },
  methods: {
    submit (key) {
      const keyid = document.querySelector('#boxItem' + key)
      console.log(keyid.offsetTop)
      const length = keyid.offsetTop - 63
      window.scrollTo({
        top: length,
        behavior: 'smooth'
      })
    }
  }
}
</script>
<style lang="less">
body {
    display: block;
    margin: 0px;
}
.home{
  height: 100%;
  width: 100%;
  overflow: hidden;
  // background-image: url('../assets/back.jpg');
  // background-attachment: fixed;
  .navi-header {
    width: 100%;
    height: 9vh;
    line-height: 10vh;
    display: flex;
    position: fixed;
    top: 0vh;
    left: 0vw;
    right: 0vw;
    background: black;
    color: white;
    overflow: hidden;
    padding: 1vh 1.5vw;
    z-index: 2;
    display: flex;
    align-items: center;
    font-family: Overlock,cursive;
    font-size: 3vh;
    div {
      box-sizing: border-box;
      height: 80%;
      width: 11vw;
      padding: 4vw;
      border: solid 0.1vh rgba(255, 255, 255, 0.616);
      padding: 1vh;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 1vh;
      border-radius: 1vh;
      &:hover, &:active {
        background: white;
        color: black;
        cursor: pointer;
        animation: buttonhover 1s linear;
      }
    }
  }
  .selfIntroduction{
    width: 100%;
    background: white;
    // background-image: url('../assets/back.jpg');
    position: relative;
    top: 10vh;
    overflow: hidden;
  }
  .summary {
    margin-top: 8vh;
    width: 100%;
    padding: 10px;
    // background: white;
    background-image: url('../assets/back2.jpg');
  }
  .progress {
    width: 100%;
    background: #f5f5f5;
  }
  .future {
    width: 100%;
    background:white;
    background-image: url('../assets/back.jpg');
  }
}
@keyframes buttonhover {
  from {
    background: black -50%;
    font-size: 2vh;
    color: black;
  }
  to {
    color: black;
    border-radius: 1.5vh;
    box-shadow: 1vh 2vw 1vw 1 white;
    font-weight: blod;
  }
}
</style>
